<template>
  <div class="Home">
    <div class="search">
      <router-link :to="{ path: '/Home' }"> </router-link>
      <van-search @click="goToSearch" v-model="SerVal" placeholder="搜索商品,共120121款好物" disabled />
      <div class="login"><button>登录</button></div>
    </div>
    <div class="cart" v-show="!isShow" ref="cart">
      <ul>
        <li class="clearfix">
          <router-link class="txt" @mousemove="mousemove" :to="{ path: '/Home' }">推荐</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">居家生活</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">服饰鞋包</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">美食酒水</router-link>
        </li>
        <li>
          <div class="icon" @click="switchCat"></div>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">个护清洁</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">个护清洁</router-link>
        </li>
      </ul>
      <!-- 蒙版 -->
      <div class="liner"></div>
    </div>
    <!-- 全部频道 -->
    <div class="allchannel" v-show="isShow" ref="channel">
      <div class="top">
        <span>全部频道</span>
        <div class="icon" @click="switchCat"></div>
      </div>
      <ul class="label">
        <li class="active">
          <router-link class="activ" :to="{ path: '/Home' }">推荐</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">居家生活</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">服饰鞋包</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">美食酒水</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">个护清洁</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">母婴亲子</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">运动旅行</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">数码家电</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/Home' }">严选全球</router-link>
        </li>
      </ul>
    </div>
    <!--轮播图 -->
    <baner v-show="!isShow"></baner>
    <!-- 资本家的话 -->
    <div v-show="!isShow" class="grow">
      <div class="pipai"> <img src="../assets/logo/2d0402ffcd52b3ec3b07422681c42a89.png" alt="">
        <span>网易自营品牌</span>
      </div>

      <div class="pipai"> <img src="../assets/logo/a03dd909803b9ac032eba58b7253a2f6.png" alt="">
        <span>30天无忧退货</span>
      </div>
      <div class="pipai"> <img src="../assets/logo/eb61ee48e8942dbd1784c9ee75ebe955.png" alt="">
        <span>48小时快速退款</span>
      </div>
    </div>
    <!-- 精品推荐  那个接口不知道为什么没有图片-->
    <div v-show="!isShow" class="recommendation">
      <div class="recommen">
        <div class="product" v-for="(pruductList,index) of recommenProduct" :key="index">
          <router-link :to="{ path:'/Homepruduct',query:{name:pruductList.id}}">
            <img src="../assets/c6fd8835a6400b7da7a016ad85506b69.png" alt="">
          </router-link>
          <span>{{pruductList.name}}</span>
        </div>

      </div>

    </div>
    <!-- 品牌商直供 -->
    <div v-show="!isShow" class="brand">
      <h3>品牌直销商直供</h3>
      <div class="blandIm">
        <div class="brandImg" v-for="(bland,index) of Branddistributor" :key="index">
          <img :src="bland.list_pic_url" alt="">
          <div class="title">
            <span>{{bland.name}}</span>
            <div class="prize">￥{{bland.floor_price}}元</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 专题精选 -->
    <div v-show="!isShow" class="selection clearfix" v-for="(item,index) of selectionList" :key="index">
      <h3>{{item.title}}</h3>
      <div class="left">
        <img :src="item.avatar" alt="">
        <span>{{item.subtitle}}</span>
      </div>
      <div class="right">
        <img :src="item.scene_pic_url" alt="">
        <!-- <div class="count">
          <div class="prize">0元</div>
          <div class="read_count">6.4k</div>
        </div> -->
      </div>
    </div>
    <!-- 底部 -->
    <Footer v-show="!isShow"></Footer>
    <i v-show="goTop"  @click="CgoTop()" ref="gotop"  class="m-goToTop">👆</i>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
  // 请求首页
  import baner from "../components/baner";
  import Footer from "../components/common/Flooter"
  import { getHomelist } from "../api/api";
  export default {
    name: "YxHome",
    components: { baner, Footer },
    data() {
      return {
        SerVal: "",
        isShow: false,
        isSho:true,
        // 新品展示的数据
        recommenProduct: [],
        // 品牌直销商数据
        Branddistributor: [],
        // 专题精选
        selectionList: [],
        // goTOP
        goTop: false
      };
    },
    created() {
      getHomelist().then((res) => {
        this.recommenProduct = res.data.categoryList
        console.log(res)
        this.selectionList = res.data.topicList
        this.Branddistributor = res.data.brandList
      })
    },
    mounted() {
   
      this.$route.meta.isShow = this.isShow
      console.log(this.isShow)
  
      window.addEventListener('scroll', () => {
        let top = document.documentElement.scrollTop;
        if (top >= 400) {
          this.goTop = true;
        }else{
          this.goTop = false;
        }

      })

    },
    methods: {
      switchCat() {
        // 控制全部频道显示
      
        this.isShow = !this.isShow;
        //   this.$refs.cart.style.display = "none";
        //   this.$refs.channel.style.display = "block";
      },
      goToSearch(){
        this.$router.push('/Home/SearchPopup')
        this.isShow = !this.isShow;
      },
    
      mousemove() { },
      CgoTop(){
        
        let time;
        let This = this;
        clearInterval(time)
        let top = document.documentElement.scrollTop;
       time = setInterval(function(){
         top-=100;
         if(top<0){
           top = 0;
           clearInterval(time)
         }
         window.scrollTo(0, top)
        },16)
       
      }
    },
  };
</script>

<style lang="scss" scoped>
  .m-goToTop {
    display: block;
    position: fixed;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: .3rem;
    right: 0.3rem;
    z-index: 3;
    bottom: 2.3rem;

  }

  .selection {
    margin-top: .1rem;
    background-color: #fff;


    h3 {
      line-height: .4rem;
      padding: .2rem;
    }

    .left {
      float: left;
      text-align: center;

      span {
        display: block;
        word-wrap: break-word;
        font-size: .2rem;
        word-wrap: break-word;
        width: 2.44rem;
      }
    }

    .right {

      position: relative;
      /* .count{
       position: absolute;
       bottom: -3rem;
       right: 0;
     } */

      img {
        position: absolute;
        right: 0;
        top: 0;
        width: 5rem;
        height: 3rem;
      }
    }
  }


  .brand {

    background-color: #fff;
    margin-top: .2rem;

    h3 {
      padding: .2rem;
      display: block;
      font-size: .30rem;
      line-height: .7rem;
      color: #000;
      font-family: PingFangSC-Regular;
    }

    .brandImg {
      margin-bottom: .1rem;

    }

    .blandIm {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      position: relative;

      .title {
        position: absolute;
        padding-top: .2rem;
        padding-left: .3rem;

        .prize {
          margin-top: .1rem;
        }
      }
      img {
        width: 3.7rem;
        height: 3rem;
        background-size: 100% 100%;
        float: right;
      }
    }
  }

  .Home {
  
    background-color: #F5F5F5;
  }

  .recommendation {

    background-color: #fff;

    .recommen {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
    }

    .product {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-left: .2rem;
      background-color: #fff;

      img {
        width: 1.1rem;
        height: 1.1rem;
      }

      span {
        font-size: .24rem;
      }
    }
  }

  .grow {
    display: flex;
    height: .8rem;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;


    img {
      width: .32rem;
      height: .32rem;

    }

    span {
      font-size: .28rem;

    }
  }

  /* 搜索部分 */
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;

    a {
      background-image: url("../assets/hxm_yanxuan-node-wap_style_img_index-20a8c6c35d0ec7b54782d2098282371f.png");
      vertical-align: middle;
      width: 1.38rem;
      height: 0.4rem;
      background-size: 3.76rem 3.76rem;
      background-position: -1.26rem -2.52rem;
      display: inline-block;
      margin-left: 0.2rem;
    }

    .van-field__control {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      background-color: #ccc;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      box-sizing: border-box;
      padding: 10px 2px;
      background-color: #fff;
    }

    button {
      width: 0.74rem;
      height: 0.4rem;
      line-height: 0.4rem;
      text-align: center;
      color: #dd1a21;
      border: 1px solid #dd1a21;
      border-radius: 0.08rem;
      margin-left: -0.16rem;
      font-size: 0.24rem;
    }
  }

  .cart {
    background-color: #fff;

    width: 7.5rem;
    margin: 0 auto;

    ul {
      width: 100%;
      height: 0.5rem;
      overflow: hidden;

      li {
        display: inline-block;
        padding-left: 0.3rem;
        line-height: 0.6rem;
        font-size: 0.28rem;
        color: #333;
        text-align: center;
      }

      a {
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        line-height: 0.3rem;
      }

      .txt {
        color: #dd1a21;
        border-bottom: 1px solid #dd1a21;
      }

      .icon {
        background-image: url("../assets/hxm_yanxuan-node-wap_style_img_arrow-ea052ea4f1e3e31f2b8731041dc6d9f8.png");
        display: inline-block;
        vertical-align: middle;
        width: 0.3rem;
        height: 0.3rem;
        background-size: 1.06rem 0.85rem;
        background-position: -0.35rem 0;
        -webkit-transition: -webkit-transform 0.5s;
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
      }
    }
  }

  .liner {
    position: absolute;
    top: 1rem;
    right: 1.18rem;
    width: 0.6rem;
    height: 0.6rem;
    background-image: -webkit-gradient(linear,
        left top,
        right top,
        from(hsla(0, 0%, 100%, 0)),
        to(#fff));
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff);
  }

  .allchannel {
    .top {
      display: flex;
      width: 95.1%;
      justify-content: space-between;
      align-items: center;

      span {
        display: block;
        margin-left: 0.27rem;
      }

      .icon {
        margin-top: 0.1rem;
        background-image: url("../assets/hxm_yanxuan-node-wap_style_img_arrow-ea052ea4f1e3e31f2b8731041dc6d9f8.png");
        display: inline-block;
        vertical-align: middle;
        width: 0.3rem;
        height: 0.3rem;
        background-size: 1.06rem 0.85rem;
        background-position: -0.34rem 0;
        -webkit-transition: -webkit-transform 0.5s;
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
      }
    }

    .label {
      margin-top: 0.2rem;

      .active {
        color: #dd1a21;
        border: 1px solid #dd1a21;
      }

      .activ {
        color: #dd1a21;
      }

      li {
        width: 1.5rem;
        margin-top: 0.1rem;
        height: 0.56rem;
        line-height: 0.56rem;
        text-align: center;
        float: left;
        z-index: 2;
        margin-bottom: 0.4rem;
        margin-left: 0.3rem;
        background: #fafafa;
        border: 1px solid #ccc;
        border-radius: 0.04rem;

        a {
          font-size: 13px;
        }
      }
    }
  }

  .slide-enter,
  .slide-leave {
    right: -100%;
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: right 0.2s linear;
  }

  .slide-enter-to,
  .slide-leave {
    right: 0;
  }

</style>
